<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title></title>
    <style>
        .winTc1 {
            width: 100%;
            height: 0%;
            bottom: 0;
            left: 0;
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .winTc1 .big1 {
            position: absolute;
            width: 88%;
            height: 60%;
            padding: 2rem 1.8rem 2rem 1.8rem;
            background: #fff;
            border-top-left-radius: 2rem;
            border-top-right-radius: 2rem;
            overflow-y: scroll;
        }

        .winTc1 .big1 .close {
            width: 1.36rem;
            height: 1.36rem;
            position: fixed;
            margin-left: 25.5rem;
            margin-top: -0.5rem;
        }

        .winTc1 .big1 .winTxt1 p {
            color: #666666;
            font-size: 1.04rem;
            text-align: left;
            margin-bottom: 1.2rem;
        }

        .winTxt1 h2 {
            color: #3c1ba8;
            font-size: 1.44rem;
            text-align: center;
            font-weight: normal;
        }

        .winTxt1 div h3 {
            color: #5024dc;
            font-size: 1.28rem;
            font-weight: normal;
            margin-bottom: 1.6rem;
            margin-top: 2rem;
        }

        .show {
            animation: myfirst 0.5s;
            -webkit-animation: myfirst 0.5s;
            animation-fill-mode: forwards;
        }

        @keyframes myfirst {
            0% {
                height: 0%;
            }
            100% {
                height: 100%;
            }
        }

        @-webkit-keyframes myfirst {
            0% {
                height: 0%;
            }
            100% {
                height: 100%;
            }
        }

        @-moz-keyframes myfirst {
            0% {
                height: 0%;
            }
            100% {
                height: 100%;
            }
        }

        .hideList {
            bottom: 0;
        }
    </style>
    <!--<script src="__STATIC__/index/img/brands.png"></script>-->
    <script src="__STATIC__/index/js/jquery.3.3.1.min.js"></script>
</head>
<body>
<button id="btn">打开</button>
<div class="winTc1" id="getRule">
    <div class="big1">
        <img class="close" src="__STATIC__/index/img/brands.png"/>
        <div class="winTxt1">
            <h2>鼓励人心的鸡汤</h2>
            <div>
                <h3>一</h3>
                <p>1.阅读使人充实，会谈使人敏捷，写作使人精确；</p>
                <p>2.最大的骄傲于最大的自卑都表示心灵的最软弱无力；</p>
                <p>3.自知之明是最难得的知识；</p>
                <p>4.勇气通往天堂，怯懦通往地狱；</p>
                <p>5.有时候读书是一种巧妙地避开思考的方法。</p>
            </div>
            <div>
                <h3>二</h3>
                <p>1.阅读一切好书如同和过去最杰出的人谈话；</p>
                <p>2.越是没有本领的就越加自命不凡；</p>
                <p>3.越是无能的人，越喜欢挑剔别人的错儿。</p>
                <p>4.知人者智，自知者明。胜人者有力，自胜者强。</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#btn").click(function () {
        $("#getRule").addClass('show');
        $(".big1").addClass('hideList');
    })
    $(".close").click(function () {
        $("#getRule").removeClass('show');
        $(".big1").removeClass('hideList');
    })
</script>
</body>
</html>

